<template>
	<div class="rightcenter">
		<div class="right-centerr" v-for="(itemit, indexreco) in records" :key="indexreco">
			<el-row>
				<el-col>
					<p>{{ itemit.content }}</p>
				</el-col>
			</el-row>
			<el-row>
				<el-col v-if="itemit.typeName == '单选题' || itemit.typeName == '判断题'">
					<el-radio-group v-model="radio">
						<el-radio v-for="(item, index) in optionList" :label="index" :key="index"
							@change="radiochange(index, itemit.id,indexreco)" :disabled="disables">
							{{ item.value }}:{{ item.name }}
						</el-radio>
					</el-radio-group>
						<p v-if="itemit.ischeck" :style="{'color':itemit.color}">{{ answerinfo }}</p>
				</el-col>
				<el-col v-if="itemit.typeName == '多选题'">
					<el-checkbox-group v-model="checkList">
						<el-checkbox v-for="(item, index) in optionList" :key="index" :disabled="disables"
							:label="index" @change="checkchange(index)">
							{{ item.value }}:{{ item.name }}
						</el-checkbox>
					</el-checkbox-group> 
						<p v-if="itemit.ischeck" :style="{'color':itemit.color}">{{ answerinfo }}</p>
				 
				</el-col>
				<el-col v-if="itemit.typeName == '多选题'" style="margin-left:20%;">
					<el-button style="margin-top:30px;" v-if="!disables" type="primary" size="mini"
						@click="sureemit(itemit.id,indexreco)" class="preornext">确认提交</el-button>
				</el-col>
			</el-row>
			<!-- 案例分析题 -->
			<el-row v-if="itemit.typeName == '案例分析题'">
				<el-col v-for="(item1, childQ) in children" :key="childQ">
					<p>{{ item1.content }}</p>
					<template v-if="item1.typeName == '单选题' || item1.typeName == '判断题'">
						<el-radio-group v-model="caseAnalysis[childQ]">
							<el-radio v-for="(item, optionIndex) in children[childQ].optionList" :label="item.value"
								:key="optionIndex" @change="(e) => radioMultiChange(e, childQ, itemit.id)"
								:disabled="item.disabled">
								{{ item.value }}:{{ item.name }}
							</el-radio>
						</el-radio-group>
						<p v-if="item1.ischeck" :style="{'color':children[childQ].color}">{{ item1.answerinfo }}</p>
					</template>

					<template v-if="item1.typeName == '多选题'">
						<el-checkbox-group v-model="caseAnalysis[childQ]">
							<el-checkbox v-for="(item, optionIndex) in children[childQ].optionList" :key="optionIndex"
								:disabled="item.disabled" :label="item.value">
								{{ item.value }}:{{ item.name }}
							</el-checkbox>
						</el-checkbox-group>
						<p v-if="item1.ischeck" :style="{'color':children[childQ].color}">{{ item1.answerinfo }}</p>
						<el-row v-if="!item1.ischeck" style="margin-left:20%;">
							<el-col>
								<el-button style="margin-top:30px;" type="primary" size="mini"
									@click="caseAnalysisEmit(childQ, itemit.id)" class="preornext">确认提交
								</el-button>
							</el-col>
						</el-row>
					</template>
				</el-col>
			</el-row> 
		</div>

		<el-row style="margin-top: 3%;text-align: left;">
			<el-col>
				<el-button  size="mini" v-if="current > 1"
					@click="preQuestion(current, menuId, size, userId)" class="preornext">上 一 题</el-button>
				<!-- menuId -->
				<el-button  size="mini" v-if="current < pages"
					@click="nextquestion(current, menuId, size, userId)" class="preornext">下 一 题
				</el-button>
				<p v-if="records.length == 0">还没有数据哦~~~~~~~~</p>
				<el-button  size="mini" @click="quitpractice()" v-if="records.length > 0" class="preornextemit">退 出</el-button>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import {
		order,
		saveError,
		errorDelete
	} from "../api/index.js";
	var topicLocaArr = [];//56037
	export default {
		name: "practice",
		data() {
			return {
				apiType: "",
				chapterType: 1,
				checkList: [],
				radio: "",
				userId: "",
				records: [],
				current:1 ,
				size: 1,
				menuId: '',
				optionList: [],
				answerinfo: "",
				answerList: [],
				checkchangedata: [],
				isan: false,
				pages: "",
				total: "",
				children: [],
				childoptionList: [],
				caseAnalysis: [],
				ischeck: false,
				allDataCache: {}
			};
		},
		mounted() {
			window.localStorage.removeItem('allDataCache')
			this.apiType = this.$route.query.apiType;
			this.chapterType = this.$route.query.chapterType;
			this.userId = JSON.parse(localStorage.getItem("userId"));
			this.menuId = JSON.parse(localStorage.getItem("menuId"));
			this.getQuestionById(this.current);
		},
		methods: {
			quitpractice() {
				this.$router.push("courcesinfo");
			},
			saveError(nanswer, nquestionId, nreply) {
				saveError({
						error: [{
							answer: nanswer,
							questionId: nquestionId,
							reply: nreply,
							menuId: this.menuId,
							userId: this.userId,
						}, ],
					})
					.then((res) => {
						console.log("loading", res.data);
					})
					.catch((error) => {
						console.log(this.input);
						console.log(this.password);
						this.$message({
							type: "error",
							message: error,
						});
					});
			},
			ErrorDelete(questionId) {
				errorDelete({
						menuId: this.menuId,
						questionBankId: questionId,
						userId: this.userId,
					})
					.then((res) => {
						if (res.data.code === 0) {
							console.log("errorLog", res.data.data);
						} else {
							this.$message({
								type: "error",
								message: res.data.msg,
							});
						}
					})
					.catch((error) => {
						this.$message({
							type: "error",
							message: error,
						});
					});
			},
			// 多选确认
			sureemit(questionId,indexreco) {
				//排序
				var anser = "";
				this.checkchangedata = this.checkchangedata.sort();
				this.answerList = this.answerList.sort();
				console.log("正确答案", this.answerList);
				var answer = this.answerList.toString().toUpperCase();
				var checked = this.checkchangedata.toString().toUpperCase();
				console.log('records',this.records,indexreco)
				if (checked == answer) {
					this.answerinfo = "回答正确";
						 this.$set(this.records[indexreco], "color", '#0E8FFD');
					if (this.apiType == "error") {
						this.removeTopicLocaData(this.current)
						this.ErrorDelete(questionId);
						this.getQuestionById(this.current);
					}
				} else {
					this.answerinfo = "正确答案:" + answer;
					 this.$set(this.records[indexreco], "color", '#FD0E0E');
					this.saveError(answer, questionId, checked);
					console.log("多选", questionId);
				}
				this.isan = true;
				this.disables = true;
				this.$set(this.records[indexreco], "ischeck", true);
				this.setTopicLocaData();
			},
			// 多选change
			checkchange(index) {
				this.checkchangedata = this.checkchangedata.concat(
					this.optionList[index].value
				);
			},
			// 单选Change
			radiochange(number, questionId,indexreco) {
				this.disables = true;
				if (this.optionList[number].value != this.answerList[0]) {
					this.answerinfo = "正确答案:" + this.answerList[0];
						this.$set(this.records[indexreco], "color", '#FD0E0E');
					
					this.saveError(
						this.answerList[0],
						questionId,
						this.optionList[number].value,
					);
				} else {
					this.answerinfo = "回答正确";
						this.$set(this.records[indexreco], "color", '#0E8FFD');
					if (this.apiType == "error") {
						this.removeTopicLocaData(this.current)
						this.ErrorDelete(questionId);
						this.getQuestionById(this.current);
						this.pages--;
					}
				}
				this.setTopicLocaData();
				this.$set(this.records[indexreco], "ischeck", true);
			},
			// 案例分析单选Change
			radioMultiChange(e, childQ, questionId) {
				console.log("e", e, childQ);
				var question = this.children[childQ];
				this.$set(question, "ischeck", true); 
				console.log('question.answerList[0]',question.answerList[0]);
			 	console.log('this.caseAnalysis[childQ]',this.caseAnalysis[childQ]);
	      console.log('childQ',childQ);
				if (this.caseAnalysis[childQ] != question.answerList[0]) {
					this.$set(question, "answerinfo", "正确答案:" + question.answerList[0]);
					this.$set(question, "color", '#FD0E0E');
					this.saveError(
						question.answerList[0],
						questionId,
						this.caseAnalysis[childQ]
					);
					console.log("单选案例分析单选Change", questionId);
				} else {
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
					if (this.apiType == "error") {
						this.removeTopicLocaData(this.current)
						this.ErrorDelete(questionId);
						this.getQuestionById(this.current);
						this.pages--;
					}
				}
					this.setTopicLocaData();

				question.optionList.forEach((item) => {
					item.disabled = true;
				});
			},
			// 案例分析确认多选题
			caseAnalysisEmit(childQ,questionId) {
				var question = this.children[childQ];

				var checkchangedata = this.caseAnalysis[childQ].sort();
				var answerList = question.answerList.sort();

				var answer = answerList.toString().toUpperCase();
				var checked = checkchangedata.toString().toUpperCase();

				if (checked == answer) {
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
					if (this.apiType == "error") {
						this.removeTopicLocaData(this.current)
						this.ErrorDelete(questionId);
						this.getQuestionById(this.current);
						this.pages--;
					}
				} else {
					this.$set(question, "answerinfo", "正确答案:" + answer);
					this.$set(question, "color", '#FD0E0E');
					this.saveError(answer, questionId, checked);
					console.log("案例分析确认多选题", questionId);
				}
        	this.setTopicLocaData();
				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});
			},
			// 设置本地存储数据结构
			setTopicLocaData() {
				var obj = {
					pages: this.pages,
					current: this.current,
					size: this.size,
					total: this.total,
					records: this.records,
					disables: this.disables,
					radio: this.radio,
					checkchangedata: this.checkchangedata,
					isan: this.isan,
					answerinfo: this.answerinfo,
				};
				this.allDataCache[this.current] = obj
				//window.localStorage.setItem("topicLocaArr", JSON.stringify(topicLocaArr));
			},
			setTopicData(datas, newQuestion) {
				this.pages = datas.pages;
				this.total = datas.total;
				this.records = datas.records;
				for (var i = 0; i < this.records.length; i++) {
					this.optionList = this.records[i].optionList;
					this.answerList = this.records[i].answerList;
					this.children = this.records[i].children;
					if (this.records[i].typeName == "案例分析题") {
						for (var c = 0; c < this.children.length; c++) {
							if (
								this.children[c].typeName == "单选题" ||
								this.children[c].typeName == "判断题"
							) {
								this.caseAnalysis[c] = "";
							} else if (this.children[c].typeName == "多选题") {
								this.caseAnalysis[c] = [];
							}
						}
					}
				}

				if (!newQuestion) {
					this.disables = datas.disables;
					this.radio = datas.radio;
					this.checkList = [];
					this.checkchangedata = this.checkchangedata;
					this.isan = this.isan;
					this.answerinfo = datas.answerinfo;
				} else {
					this.disables = false;
					this.radio = -1;
					this.checkList = [];
					this.checkchangedata = [];
					this.isan = false;
				}
			},
			getTopicLocaData(ncurrent) {
				return this.allDataCache[ncurrent];
			},
			removeTopicLocaData(ncurrent) {
				delete this.allDataCache[ncurrent]
				var newCache = {}
				for (var item in this.allDataCache) {
					var itemData = this.allDataCache[item]
					if (itemData.current > ncurrent) {
						itemData.current -= 1
					}
					newCache[itemData.current] = itemData
				}
				this.allDataCache = newCache
			},
			// 获取题目
			getQuestionById(ncurrent) {
				//先查看是否有本地存储
				var topic = this.getTopicLocaData(ncurrent);
				if (topic) {
					this.setTopicData(topic, false);
				} else {
					order({
							current: ncurrent,
							apiType: this.apiType,
							chapterType: this.chapterType,
							menuId: this.menuId,
							size: this.size,
							userId: this.userId,
						})
						.then((res) => {
							if (res.data.code === 0) {
								this.setTopicData(res.data.data, true);
							} else {
								this.$message({
									type: "error",
									message: res.data.msg,
								});
								console.log("message", res.data.data);
							}
						})
						.catch((error) => {
							this.$message({
								type: "error",
								message: error,
							});
							console.log("message", res.data.data);
						});
				}
			},
			preQuestion(ncurrent, nmenuId, nsize, nuserId) {
				this.current = ncurrent - 1;
				this.getQuestionById(this.current);
			},
			nextquestion(ncurrent, nmenuId, nsize, nuserId) {
				this.current = ncurrent + 1;
				this.getQuestionById(this.current);
			},
			quit() {
				this.$router.push("courcesinfo");
			},
		},
	};
</script>

<style scoped>
	button {
		margin-left: 5%;
	}

	.dialog-container {
		width: 100%;
		height: 300px;
		border: 1px solid black;
	}

	.dialog-center {
		width: 60%;
		height: 80px;
		margin: auto;
		margin-top: 15%;
		text-align: center;
		border: 1px solid black;
	}

	.dialog-center1 {
		width: 60%;
		height: 120px;
		margin: auto;
		margin-top: 10%;
		text-align: center;
		border: 1px solid black;
	}

	.finally {
		margin: auto;
		margin-left: 50%;
		margin-top: 20px;
	}

	.rightcenter {
		text-align: left;
		margin-left: 3%;
	}

	.preornext {
		background-color: #469DED;
		border: 1px solid #FD8C27;
		color: white;
		margin-top: -8%;
		width: 75px;
		border-radius: 5px;
	}

	.preornextemit {
		background-color: #FD8C27;
		border: 1px solid #469DED;
		color: white;
		margin-top: -8%;
		width: 65px;
		border-radius: 5px;
	}
</style>
